<script setup>
import LimitFram from "./LimitFrame.vue";
import { deepClone } from "@/utils";
const props = defineProps({
  limit: {
    type: Array,
    required: true,
  },
});

const blackGroupVisible = ref(false),
  form = ref({ exit: 1, ipList: [{ ipNumber: "" }] });

const formRef = ref();

const emits = defineEmits(["cancel"]);

const rules = {
  ipNumber: [{ required: true, message: "请输入", trigger: "change" }],
};

// 描述
const ruleText = computed(() => {
  let rule = props.limit.value;
  if (!rule.ipList) return "";
  return `${rule.exit == 1 ? "任意匹配" : "不匹配"} “${String(
    rule.ipList.map((item) => item.ipNumber)
  )}”`;
});

const getBlackKeys = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      props.limit.value = deepClone(form.value);
      formatLimit();
      blackGroupVisible.value = false;
    }
  });
};
// 生成表达式
const formatLimit = () => {
  let randomKey = new Date().getTime();
  props.limit.keys = [
    {
      businessType: "user",
      key: `ipNum$$_${randomKey}`,
      obj: form.value.ipList.map((item) => item.ipNumber),
    },
  ];
  props.limit.expression = `$_user.ipNum$$_${randomKey}==${
    form.value.exit == 0 ? false : true
  }`;
};

const addRule = () => {
  if (formRef.value) formRef.value.resetFields();
  blackGroupVisible.value = true;
};

const editRule = () => {
  form.value = deepClone(props.limit.value);
  blackGroupVisible.value = true;
};

// const validateipNumber = (rule, value, callback) => {
//   if (!value.includes("**")) {
//     if (value.length !== 11) {
//       callback(new Error("请输入正确的手机号"));
//     }
//   } else {
//     callback();
//   }
// };

const addNumber = (idx) => {
  form.value.ipList.splice(idx + 1, 0, { ipNumber: "" });
};
const delNumber = (idx) => {
  if (form.value.ipList.length < 2) {
    ElMessage.warning("请至少保留一条数据");
    return;
  }
  form.value.ipList.splice(idx, 1);
};

const onClose = () => {
  emits("cancel");
};

defineExpose({ add: addRule });
</script>
<template>
  <LimitFram title="IP号码限制" :content="ruleText" @edit="editRule" />
  <Dialog
    v-model="blackGroupVisible"
    title="IP号码限制"
    :width="500"
    @confirm="getBlackKeys"
    @close="onClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="类型" prop="exit">
        <el-radio-group v-model="form.exit">
          <el-radio :label="1">任意匹配</el-radio>
          <el-radio :label="0">不匹配 </el-radio>
          <!-- <el-radio :label="2">全匹配</el-radio> -->
        </el-radio-group>
      </el-form-item>
      <el-form-item
        class="input-item"
        v-for="(item, idx) in form.ipList"
        :key="idx"
        :label="`IP${idx + 1}`"
        :prop="'ipList.' + idx + '.ipNumber'"
        :rules="{
          required: true,
          message: '请输入IP',
          trigger: 'blur',
        }"
        prop="ipNumber"
      >
        <el-input
          v-model="item.ipNumber"
          oninput="value=value.replace(/^\.+|[^\d*.]/g,'')"
          placeholder="请输入IP"
        />
        <div class="_icon_box">
          <el-icon @click="addNumber(idx)"><CirclePlus /></el-icon>
          <el-icon @click="delNumber(idx)"><CircleClose /></el-icon>
        </div>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<style lang="scss" scoped>
.el-select-v2 {
  min-width: 70%;
}
:deep(.input-item .el-form-item__content) {
  display: flex;

  .el-input {
    width: 80%;
  }
  ._icon_box {
    margin-left: 5px;
    font-size: 20px;
    display: flex;
    .el-icon {
      margin-left: 5px;
      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }
  }
}
</style>
